<template>
  <div class="top">
    <el-card>
      <div class="dediv">
        <el-form :inline="true">
          <el-form-item
            ><el-input
              placeholder="请输入学院编号或者名称"
              v-model="keyword"
            ></el-input
          ></el-form-item>
          <el-form-item
            ><el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              >搜 索</el-button
            ></el-form-item
          >
        </el-form>
      </div>
      <div class="add">
        <el-button
          type="success"
          @click="handleAdd"
          icon="el-icon-plus"
          class="deadd"
          >添 加</el-button
        >
      </div>
    </el-card>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed label="序号" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          label="学院编号"
          align="center"
          property="academyNum"
        ></el-table-column>
        <el-table-column
          label="学院名称"
          align="center"
          property="academyName"
        ></el-table-column>
        <!-- <el-table-column
          label="创建人"
          align="center"
          property="created"
        ></el-table-column> -->
        <!-- <el-table-column
          label="更新人"
          align="center"
          property="updated"
        ></el-table-column> -->
        <el-table-column
          label="创建时间"
          align="center"
          property="createdAt"
        ></el-table-column>
        <el-table-column
          label="更新时间"
          align="center"
          property="updatedAt"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-dialog :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="formDemo" class="defrom">
            <el-form-item
              v-model="showClass"
              v-if="showClass == true"
              label="学院编号:"
              :label-width="formLabelWidth"
              prop="academyNum"
            >
              <el-input v-model="form.academyNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="学院名称:"
              :label-width="formLabelWidth"
              prop="academyName"
            >
              <el-input
                v-model="form.academyName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="创建人:" :label-width="formLabelWidth" prop="created">
              <el-input v-model="form.createrpeople" autocomplete="off"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="更新人:" :label-width="formLabelWidth" prop="updated">
              <el-input v-model="form.updatepeople" autocomplete="off"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="创建时间:" :label-width="formLabelWidth" prop="createAt">
              <el-input v-model="form.createtime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="更新时间:" :label-width="formLabelWidth" prop="updateAt">
              <el-input v-model="form.createtime" autocomplete="off"></el-input>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-pagination
          class="defenye"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageIndex"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.count"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  GetAcademyList,
  UpdateAcademy,
  AddAcademy,
  DeleteAcademy,
  QueryAcademy,
} from "@/api/academyapi";
export default {
  data() {
    return {
      keyword: "",
      showClass: true,
      tableData: [],
      currentIndex: 0,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        academyName: "",
        academyNum: "",
      },
      rules: {
        academyNum: [
          {
            required: true,
            trigger: "blur",
            message: "请输入学院编号",
          },
        ],
        academyName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入学院名称",
          },
        ],
        // created: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     message: "请输入创建人",
        //   },
        // ],
        // updated: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     message: "请输入更新人",
        //   },
        // ],
        createAt: [
          {
            required: true,
            trigger: "blur",
            message: "请输入创建时间",
          },
        ],
        updateAt: [
          {
            required: true,
            trigger: "blur",
            message: "请输入更新时间",
          },
        ],
      },
      page: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 100,
      },
    };
  },
  mounted() {
    this.GetList();
  },
  methods: {
    handleCurrentChange(val) {
      this.page.pageIndex = val > 0 ? val : 1;
      this.GetList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.GetList();
    },
    //获取全部列表
    GetList() {
      let params = {
        keyword: this.keyword,
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
      };
      GetAcademyList(params).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.tableData = res.data;
          this.page.count = res.page.count;
        }
      });
    },
    //查询
    handleQuery() {
      if (this.keyword == "") {
        this.$message.warning("查询条件不能为空");
        this.keyword = "";
        this.GetList();
        return;
      }
      console.log("你输入的查询条件:" + this.keyword);
      QueryAcademy(this.keyword).then((res) => {
        this.tableData = res.data;
        console.log(this.tableData);
        if (this.tableData.length === 0) {
          this.$message({
            message: "该数据不存在,请根据学院编号或者学院名称进行查询",
            type: "warning",
          });
        }
      });
    },
    //添加
    handleAdd() {
      console.log(this.showClass);
      this.showClass = false;
      this.dialogFormVisible = true;
      this.form.id = 0;
      this.form.academyName = "";
      this.form.academyNum = "";
    },
    //编辑
    handleEdit(index, row) {
      this.showClass = true;
      console.log(this.showClass);
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.academyName = row.academyName;
      this.form.academyNum = row.academyNum;
      // console.log(index, row);
      // console.log(row.id);
    },
    //取消
    handleCancel() {
      this.dialogFormVisible = false;
    },
    //保存
    handleSave() {
      this.dialogFormVisible = false;
      if (this.form.id === 0) {
        delete this.form.id;
        console.log(this.form);
        AddAcademy(this.form).then((res) => {
          if (res.code === 402) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$router.go(0);
          }
        });
      } else {
        console.log(this.form.id);
        UpdateAcademy(this.form.id, this.form).then((res) => {
          if (res.code === 402) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$router.go(0);
          }
        });
      }
    },
    handleDelete(index, row) {
      // 删除时获得当前表数组中的下标
      this.currentIndex = index;
      // 弹框提示
      this.$confirm("此操作将永久删除该课程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          DeleteAcademy(row.id).then((res) => {
            if (res.code === 200) {
              this.tableData.splice(index, 1);
              this.$message.success("删除成功");
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
.dediv {
  display: flex;
  float: left;
}
.deadd {
  margin-top: 1px;
}
.defenye {
  margin-top: 30px;
  margin-bottom: 10px;
}
.defrom > .el-form-item > .el-form-item__label {
  font-weight: bolder !important;
  font-size: 18px;
}
</style>
